<template>
  <div class="cropperCont">
    <div class="cropperForm">
      <div v-if="!cropperImg" class="noChangeImg">
        <img class="upImg" src="/img/upImg.png" />
      </div>
      <img v-if="cropperImg" class="cropperImg" :src="cropperImg" />
      <input
        ref="file"
        accept="image/*"
        type="file"
        @change="handleFileChange"
      />
    </div>
    <div
      v-if="showCropper"
      class="cropperMask"
      :style="'min-height: ' + $docHeight + 'px'"
    >
      <!-- 图片裁剪器 -->
      <cropper
        ref="cropper"
        :guides="true"
        :view-mode="2"
        :auto-crop-area="0.5"
        :aspect-ratio="1"
        :rotatable="true"
        :scalable="true"
        :crop-box-resizable="true"
        :crop-box-min-size="[100, 100]"
        :crop-box-max-size="[500, 500]"
      ></cropper>

      <!-- 裁剪按钮 -->
      <div class="cropperCtrl">
        <div class="cacelCropperBtn" @click="showCropper = false">取消裁剪</div>
        <div class="sureCropperBtn" @click="cropImage">确认裁剪</div>
      </div>
    </div>
  </div>
</template>

<script>
import "cropperjs/dist/cropper.css";
import VueCropper from "vue-cropperjs";
import { showFailToast, showLoadingToast } from "vant";
import $ from "jquery";

export default {
  components: {
    cropper: VueCropper,
  },
  data() {
    return {
      cropperImg: "",
      showCropper: false,
    };
  },
  methods: {
    // 文件选择变化事件处理函数
    handleFileChange(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => {
        this.$refs.cropper.replace(e.target.result);
      };
      reader.readAsDataURL(file);
      this.showCropper = true;
    },
    // 裁剪图片
    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob((file) => {
        // 处理裁剪后的图片，比如上传到服务器
        let formData = new FormData(); // 可以增加表单数据
        formData.append("file", file);
        const toast = showLoadingToast({
          message: "裁剪中...",
          forbidClick: true,
          duration: 60000,
        });
        $.ajax({
          url: this.$apis + "/common/Upload/UpImg",
          dataType: "json",
          type: "post",
          processData: false,
          contentType: false,
          data: formData,
          success: (res) => {
            if (res.code == 1) {
              this.cropperImg = res.data.src;
              this.$emit("ok", res.data.src);
              this.showCropper = false;
            } else {
              showFailToast("裁剪失败");
            }
            toast.close();
          },
          error: (res) => {
            toast.close();
            showFailToast("裁剪失败");
          },
        });
      });
    },
  },
};
</script>
<style scoped lang="less">
.cropperCont {
  .cropperForm {
    width: 5rem;
    height: 5rem;
    border-radius: 0.25rem;
    background-color: #f7f8fa;
    position: relative;
    margin-bottom: 1rem;
    .upIcon {
      position: absolute;
      bottom: 0;
      right: 0;
      font-size: 0.9rem;
      color: #fff;
      width: 1.5rem;
      height: 1.5rem;
      background-color: black;
      text-align: center;
      line-height: 1.5rem;
      border-radius: 0.75rem 0 0 0;
    }
    input {
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
    .noChangeImg {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 40%;
      }
    }
    img {
      width: 100%;
    }
  }
  .cropperMask {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: black;
    position: fixed;
    left: 0;
    top: 0;
    .cropperCtrl {
      width: 92%;
      margin: 0.75rem auto;
      display: flex;
      justify-content: space-between;
      .cacelCropperBtn,
      .sureCropperBtn {
        background-color: #fff;
        line-height: 2rem;
        border-radius: 0.25rem;
        width: 46%;
        text-align: center;
      }
    }
  }
}
</style>
<style>
.cropper-bg {
  background-image: none !important;
}
.cropper-bg {
  background-image: url(/img/cropper_bg.png) !important;
}
</style>
